<template>
	<view class="category">
		<head-section></head-section>
		<view class="category-list">
			<!-- 左侧分类导航 -->
			<scroll-view  scroll-y="true" class="left" >
		      <view class="row" 
						v-for="(category,index) in categoryList" 
						:key="category.id" 
						:class="[index==showCategoryIndex?'on':'']" 
						@tap="showCategory(index)"
					>
					<view class="text">
						<view class="block"></view>
						{{category.title}}
					</view>
				</view>
		  </scroll-view>
			<!-- 右侧子导航 -->
			<scroll-view  scroll-y="true" class="right" >
				<view class="category" 
					v-for="(category,index) in categoryList" 
					:key="category.id" 
					v-show="index==showCategoryIndex" 
				>
					<view class="banner">
						<image 
							:src="category.banner.img"
							@tap="jumpByPageType(category.banner.url)"
						></image>
					</view>
					<view class="list">
						<view class="box" 
							v-for="(box,i) in category.list" 
							:key="i" 
							@tap="toCategory(box)"
						>
							<image :src="box.img"></image>
							<view class="text">{{box.name}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
  import { mapState } from 'vuex';
	import headSection from '../../components/headSection.vue'
	import { links } from '../../common/mixins.js';
	
	export default {
		name: 'category',
		components: {
			headSection,
		},
		mixins: [ links ],
		data() {
			return {
				showCategoryIndex: 0,
				categoryList:[], // 分类列表
			}
		},
		computed: {
		  ...mapState ([
		    'debugSetting' // 将 this.debugSetting 映射为 this.$store.state.debugSetting
		  ])
		},
		onLoad() {			
			this.loadCategoryList(); //加载所有分类
		},
		methods: {
			// 加载所有分类数据
			loadCategoryList() {
				this.$api.goods.getAllCategory((res) => {
					this.categoryList = res.data.map((item) => {
						let {
							id: id,
							title: title,
							banner: {
								id: bannerId,
								img: bannerImg,
								url: bannerUrl,
								...bannerRest
							},
							list: list,
							...rest
						} = item;
						bannerImg = this.debugSetting.resourcePath + bannerImg;
						list = list.map((listItem) => {
							let {
								id: id,
								name: name,
								img: img,
								...rest
							} = listItem;
							img = this.debugSetting.resourcePath + img;
							return {id, name, img, ...rest};
						});
						return { 
							id, title, 
							banner: {
								id: bannerId,
								img: bannerImg,
								url: bannerUrl,
								...bannerRest
							}, 
							list, ...rest
						};
					});
				});
			},
			// 分类切换显示
			showCategory(index){
				this.showCategoryIndex = index;
			},
			// 跳转到分类页
			toCategory(e){
				this.pushPage('/pages/goods/GoodsList', {id: e.id, name: e.name}); 
			},
		}
	}
</script>

<style lang="scss">
	.category {
		.category-list{
			width: 100%;
			background-color: #fff;
			display: flex;
			.left,.right{
				position: absolute;
				
				top: 100upx;
				/*  #ifdef  APP-PLUS  */
				top: calc(100upx + var(--status-bar-height));
				/*  #endif  */
				bottom: 0upx;
			}
			.left{
				width: 24%;
				left: 0upx;
				background-color: #f2f2f2;
				.row{
					width: 100%;
					height: 90upx;
					display: flex;
					align-items: center;
					.text{
						width: 100%;
						position: relative;
						font-size: 28upx;
						display: flex;
						justify-content: center;
						color: #3c3c3c;
						.block{
							position: absolute;
							width: 0upx;
							left: 0;
						}
					}
					&.on{
						height: 100upx;
						background-color: #fff;
						.text{
							font-size: 30upx;
							font-weight: 600;
							color: #2d2d2d;
							.block{
								width: 10upx;
								height: 80%;
								top: 10%;
								background-color: #f7965e;
							}
						}
					}
				}
			}
			.right{
			   width: 76%;
				left: 24%;
				.category{
					width: 94%;
					padding: 20upx 3%;
					.banner{
						width: 100%;
						height: 24.262vw;
						border-radius: 10upx;
						overflow: hidden;
						box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.3);
						image{
							width: 100%;
							height: 24.262vw;
						}
					}
					.list{
						margin-top: 40upx;
						width: 100%;
						display: flex;
						flex-wrap: wrap;
						.box{
							width: calc(71.44vw / 3);
							margin-bottom: 30upx;
							display: flex;
							justify-content: center;
							align-items: center;
							flex-wrap: wrap;
							image{
								width: 60%;
								height: calc(71.44vw / 3 * 0.6);
							}
							.text{
								margin-top: 5upx;
								width: 100%;
								display: flex;
								justify-content: center;
								font-size: 26upx;
							}
						}
					}
				}
			}
		}
	}
</style>
